import Vue from 'vue'
import App from './App2.vue'
import Button from './components/button'
console.log(Button);

let userLevel = 2;
/* 
  v-xxx的行内属性
*/
// 创造一个全局自定义指令
// 一般会一些权限相关的指令
Vue.directive('color', function (el, obj) {
  // console.log(el, obj)
  el.style.color = obj.value || '#000'
})
// Vue.directive('permission', function (el, { value }) {
//   if (value > userLevel) {
//     // el.style.display = 'none'
//     el.parentNode.removeChild(el)
//   }
// })
// 函数的写法 其实是 bind和update的一个结合体
Vue.directive('permission', {
  // 自定义指令的钩子函数
  bind() { },
  inserted(el, { value }) {
    // 当前节点被插入到了父节点当中， 
    if (value > userLevel) {
      el.parentNode.removeChild(el)
    }
  },
  update() {

  },
  componentUpdated() { },
  unbind() {
    // console.log(666)
  }
})
Vue.component('my-button', Button)



new Vue({
  render(h) {
    return h(App)
  },
  created() {
    console.log(this);
  },
}).$mount('#app')